<template>
  <view class="page-content login">
    <view class="login-container">
      <view class="login-logo">
        <image src="/static/images/logo-y.jpeg" class="login-logo-img" mode="aspectFit"></image>
      </view>
      <!-- 标题 -->
      <view class="login-title">欢迎来到顺德智泊</view>

      <!-- 账号输入框 -->
      <view class="input-container">
        <up-input v-model="loginForm.account" placeholder="请输入手机号" border="none" fontSize="28rpx" :clearable="true">
          <template #prefix>
            <image src="/static/images/account@2x.png" class="input-icon" mode="aspectFit"></image>
          </template>
        </up-input>
      </view>

      <!-- 密码输入框 -->
      <view class="input-container">
        <up-input v-model="loginForm.password" type="password" placeholder="请输入密码" border="none" fontSize="28rpx" :clearable="true">
          <template #prefix>
            <image src="/static/images/password@2x.png" class="input-icon" mode="aspectFit"></image>
          </template>
        </up-input>
      </view>

      <!-- 登录按钮 -->
      <view class="login-btn-container">
        <button class="login-btn" @tap="handleLogin">登录</button>
      </view>

      <!-- 分割线 -->
      <view class="divider">
        <view class="divider-line"></view>
        <text class="divider-text">或</text>
        <view class="divider-line"></view>
      </view>

      <!-- 微信登录按钮 -->
      <view class="wechat-login-container">
        <button class="wechat-login-btn"  open-type="getPhoneNumber" @getphonenumber="handleWechatLogin">
          <text class="wechat-login-text">微信登录</text>
        </button>
      </view>

      <view class="agreement">
        <u-checkbox-group v-model="checkboxValue1" shape="circle" size="16">
          <u-checkbox label="item.name" name="item.name">
            <template #label>
              <view class="label">
                <text>已阅读并同意</text>
                <text class="agreement-link">《用户隐私协议》</text>
              </view>
            </template>
          </u-checkbox>
        </u-checkbox-group>
      </view>
    </view>


    
  </view>
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import { useUserStore } from "@/store/user"
import { useAuth } from "@/hooks/index"
import {appUserLogin} from '@/api'
// 获取用户store
const userStore = useUserStore()
const { wePhoneLogin } = useAuth()

const checkboxValue1 = ref([])


// 登录表单数据
const loginForm = reactive({
  account: 'superadmin',
  password: '123456',
  type: '0'
})

// 登录处理函数
const handleLogin = async () => {
  if (!loginForm.account) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return
  }
  if (!loginForm.password) {
    uni.showToast({
      title: '请输入密码',
      icon: 'none'
    })
    return
  }
  if(checkboxValue1.value.length === 0) {
    uni.showToast({
      title: '请阅读并同意用户隐私协议',
      icon: 'none'
    })
    return
  }
    
  try {
    uni.showLoading({
      title: '登录中...'
    })
    const res = await appUserLogin(loginForm)

    if (res.success) {
      const token = res.data
      userStore.setToken(token)
      // 登录成功后获取用户信息
      
      await userStore.fetchUserInfo()
      uni.hideLoading()
      uni.showToast({
        title: '登录成功',
        icon: 'none'
      })

      setTimeout(() => {
        uni.redirectTo({
          url: '/pages/home/index'
        })
      }, 600)
    }
  } catch (error) {
    console.error('登录失败:', error)
    uni.showToast({
      title: '登录失败，请重试',
      icon: 'none'
    })
  }
}

// 微信登录处理函数
const handleWechatLogin = async (e) => {

  try {
    await wePhoneLogin({
      code:e.detail.code
    })
    // 登录成功后跳转到首页
    setTimeout(() => {
      uni.switchTab({
        url: '/pages/home/index'
      })
    }, 600)
  } catch (error) {
    console.error('微信登录失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #fff;
  .agreement {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20rpx;
    .label {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #aaaaaa;
    }
    .agreement-link {
      color: #1677ff;
    }
  }
  .login-container {
    width: 85%;
    margin-top: -10vh;
  }
  .login-logo {
    width: 234rpx;
    height: 234rpx;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0rpx 22rpx 34rpx 0rpx rgba(22, 119, 255, 0.14);
    border-radius: 92rpx;
    backdrop-filter: blur(19px);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
   overflow: hidden;
  }
  .login-title {
    font-weight: 600;
    font-size: 44rpx;
    color: #333333;
    text-align: center;
    margin: 60rpx 0;
  }

  .input-container {
    margin-bottom: 30rpx;
    background: #f3f8fd;
    border-radius: 58rpx;
    padding: 30rpx;
    display: flex;
    align-items: center;
  }

  .input-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
  }

  .login-btn-container {
    margin-top: 50rpx;
  }

  .login-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background: #1677ff;
    border-radius: 58rpx;
    color: #fff;
    font-size: 32rpx;
    border: none;
  }

  .divider {
    display: flex;
    align-items: center;
    margin: 20rpx 0 20rpx;

    .divider-line {
      flex: 1;
      height: 1rpx;
      background: #e5e5e5;
    }

    .divider-text {
      margin: 0 30rpx;
      font-size: 24rpx;
      color: #999;
    }
  }

  .wechat-login-container {
    margin-top: 20rpx;
  }

  .wechat-login-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background: #07c160;
    border-radius: 58rpx;
    color: #fff;
    font-size: 32rpx;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;

    &:active {
      background: #06ad56;
    }

    .wechat-login-text {
      color: #fff;
    }
  }
}
</style>
